<template>
  <div class="full-page-container">
    <div class="login-container">
      <el-form :model="form" class="login-form">
        <div class="title-container">
          <h3>后台管理系统</h3>
        </div>
        <el-form-item class="form-item">
          <el-icon class="svg-container" :size="20">
            <User />
          </el-icon>
          <el-input v-model="form.account" placeholder="账号" class="input-field" />
        </el-form-item>
        <el-form-item class="form-item">
          <el-icon class="svg-container" :size="20">
            <el-icon>
              <Lock />
            </el-icon>
          </el-icon>
          <el-input v-model="form.password" type="password" placeholder="密码" show-password class="input-field" />
        </el-form-item>
      </el-form>
      <el-button type="primary" class="submit-button" @click="doLogin">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus';
import { useRouter } from "vue-router";
import { useAdminStore } from "@/stores/adminStore";

const router = useRouter();
const adminStore = useAdminStore();

const form = ref({
  account: "",
  password: "",
});

const doLogin = async () => {
  const { account, password } = form.value;
  await adminStore.getAdminInfo({ account, password });

  if (adminStore.adminInfo.token != null) {
    ElMessage.success("登录成功");
    router.replace({ path: "/admin" });
  }
};
</script>

<style lang='scss' scoped>
/* 设置全屏容器的样式 */
.full-page-container {
  display: flex;
  /* 使用弹性盒子布局 */
  justify-content: center;
  /* 水平方向上居中对齐子元素 */
  align-items: center;
  /* 垂直方向上居中对齐子元素 */
  height: 100vh;
  /* 使容器高度充满整个视口 */
  margin: 0;
  /* 移除默认的margin */
  background-color: #2d3a4b;
  /* 设置背景颜色为深蓝色 */
}

/* 设置登录容器的样式 */
.login-container {
  display: flex;
  /* 使用弹性盒子布局 */
  flex-direction: column;
  /* 子元素垂直排列 */
  align-items: center;
  /* 垂直方向上居中对齐子元素 */
  width: 30%;
  /* 设置容器宽度为父容器的30% */
  padding: 20px;
  /* 设置内边距为20px */
  border-radius: 8px;
  /* 设置边框圆角为8px */
  /* 背景颜色未明确设置，将继承父容器的颜色或默认为透明 */
}

/* 设置登录表单的样式 */
.login-form {
  width: 100%;
  /* 设置宽度为父容器的100% */
  /* 其他样式如布局、边距等未明确设置，将继承默认样式 */
}

/* 设置标题容器的样式 */
.title-container {
  text-align: center;
  /* 文本居中对齐 */
  margin-bottom: 20px;
  /* 下边距为20px */
  font-size: 25px;
  /* 设置字体大小为25px */
  color: #ffffff;
  /* 设置字体颜色为白色 */
  /* 背景颜色、边框等未明确设置 */
}

/* 设置表单项的样式 */
.form-item {
  margin-bottom: 15px;
  /* 下边距为15px */
  width: 100%;
  /* 设置宽度为父容器的100% */
  /* 布局、内边距、边框等未明确设置 */
}

/* 设置输入框的样式 */
.input-field {
  width: calc(100% - 40px);
  /* 宽度为父容器的100%减去40px，为图标留出空间 */
  height: 40px;
  /* 设置高度为40px */
  /* 其他样式如字体、颜色、边框等未明确设置 */
}

/* 设置图标容器的样式 */
.svg-container {
  margin-right: 10px;
  /* 右边距为10px，为图标和输入框之间添加间距 */
  color: #ffffff;
  /* 设置图标颜色为白色（注意：对于SVG图标，可能需要其他方式设置颜色） */
  /* 宽度、高度、背景颜色等未明确设置 */
}

/* 设置提交按钮的样式 */
.submit-button {
  width: 100%;
  /* 设置宽度为父容器的100% */
  height: 40px;
  /* 设置高度为40px */
  background-color: #409eff;
  /* 设置背景颜色为蓝色 */
  border: none;
  /* 设置无边框 */
  border-radius: 4px;
  /* 设置边框圆角为4px */
  color: #ffffff;
  /* 设置字体颜色为白色 */
  font-size: 15px;
  /* 设置字体大小为15px */
  /* 其他样式如内边距、阴影等未明确设置 */
}

/* 设置鼠标悬停在提交按钮上的样式 */
.submit-button:hover {
  background-color: #66b1ff;
  /* 设置鼠标悬停时的背景颜色为更浅的蓝色 */
  /* 其他样式变化如字体颜色、边框等未明确设置 */
}
</style>